<template>
  <div class="technology_page">
      <Row :gutter="16">
          <Col :md="17" :lg="17" :sm="24" :xs="24">
                <Breadcrumb :title="this.$route.meta"/>
                <ArticleList :tag="this.$route.query.tag"  v-if="!this.$route.query.searchName"/>
                <SearchShow v-else-if="this.$route.query.searchName" :searchName="this.$route.query.searchName"/>
            </Col>
            <Col :md="7" :lg="7" :sm="0" :xs="0">
                 <!-- <Input search placeholder="Enter something..." style="width:300px" @on-search='search' /> -->
                <PersonalInfo />
                <Contact />
                <TagCloud />
                <FriendlyLink />
            </Col>
      </Row>
  </div>
  
</template>

<script>
import PersonalInfo from '@/components/front/PersonalInfo.vue'
import TagCloud from '@/components/front/TagCloud.vue'
import FriendlyLink from '@/components/front/FriendlyLink.vue'
import Contact from '@/components/front/Contact.vue'
import ArticleList from '@/components/front/ArticleList.vue'
import Breadcrumb from '@/components/front/Breadcrumb.vue'
import SearchShow from '@/components/front/SearchShow.vue'
export default {
    data () {
        return {
            value: 0,
            setting: {
                autoplay: true,
                autoplaySpeed: 2000,
                dots: 'inside',
                radiusDot: true,
                trigger: 'click',
                arrow: 'hover',
            }
        }
    },
    components:{
        PersonalInfo,
        TagCloud,
        FriendlyLink,
        Contact,
        ArticleList,
        Breadcrumb,
        SearchShow
    },
    created(){
          this.$route.meta.title = this.$route.query.tag + '标签下的文章'
          if(this.$route.query.searchName){
               this.$route.meta.title = '文章标题(' +this.$route.query.searchName + ')的文章'
          }
    },
    // watch:{
    //     $route(){
    //         this.$route.meta.title = this.$route.query.tag + '标签下的文章'
    //     }
    // }
}
</script>

<style scoped>
    .carBox{
        padding: 4px;
        /* width: 800px; */
        background-color: #fff;
    }
    .demo-carousel img{
        width: 800px;
        height: 300px;
    }
</style>